<template>
  <div id="count-div">
    <div class="time"><div class="time-content-wrapper" :class="{androidVC: this.wccconfig.isAndroid}"><span class="time-content">{{hour}}</span></div></div>
    <div class="split">:</div>
    <div class="time"><div class="time-content-wrapper" :class="{androidVC: this.wccconfig.isAndroid}"><span class="time-content">{{min}}</span></div></div>
    <div class="split">:</div>
    <div class="time"><div class="time-content-wrapper" :class="{androidVC: this.wccconfig.isAndroid}"><span class="time-content">{{secound}}</span></div></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        countDown: '',
        timer: '',
        hour: '',
        min: '',
        secound: '',
        currenTime: 0,
      }
    },
    props: {
      deadLine: {
        type: String
      },
      callback: {
        type: Function,
        default: ''
      }
    },
    created() {
      this.timerStart()
    },
    beforeDestroy() {
      clearInterval(this.timer)//关闭当前timer
    },
    watch: {
      deadLine: function (curVal, oldVal) {
        clearInterval(this.timer)//关闭当前timer
        this.timerStart()
      }
    },
    methods: {
      fixNumber(num, length) {
        return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num
      },
      fixHMS(time) {
        this.hour = this.fixNumber(Math.floor(time / 3600), 2)
        this.min = this.fixNumber(Math.floor((time - this.hour * 3600) / 60), 2)
        this.secound = this.fixNumber(Math.floor(time - this.hour * 3600 - this.min * 60), 2)
      },
      timerStart() {
        if (!this.deadLine || this.deadLine <= 0) {
          this.fixHMS(0)
          return
        }
        var self = this
        self.currenTime = (parseInt(this.deadLine) + 1)
        self.fixHMS(self.currenTime)
        self.utils.setCountdownFunc(this.countdownFunc)
      },
      countdownFunc() {
        if (this.currenTime <= 0) {
          return
        }
        this.currenTime = this.currenTime - 1
        this.fixHMS(this.currenTime)
        if (this.currenTime <= 0) {
          if (this.callback && this.callback instanceof Function) {
            this.callback()
          }
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #count-div
    .time
      display inline-block
      .time-content-wrapper
        line-height .32rem
        height .32rem
        background-color #da2828
        border-radius .07rem
        text-align center
        padding 0 .03rem 0 .03rem
        &.androidVC
          padding .03rem .03rem 0 .03rem
        .time-content
          font-size .26rem
          color:#fff
    .split
      display inline-block
      color #da2828

</style>
